<template>
    <div>
        <NavTop></NavTop>
        <el-container class="common-layout">
            <el-aside width="200px">
                <NavLeft @handle="dadHandle"></NavLeft>
            </el-aside>
            <el-container>
                <el-header>
                    <MySwiper></MySwiper>
                </el-header>
                <el-main>
                    <MyList :list="goodslist"></MyList>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import NavTop from '@/components/NavTop.vue';
import MyList from './components/MyList.vue';
import MySwiper from './components/MySwiper.vue';
import NavLeft from './components/NavLeft.vue';
import axios from 'axios';



export default {
    components: {
        NavTop,
        MyList,
        MySwiper,
        NavLeft,
    },
    data() {
        return {
            list: [],
            goodslist: []

        }
    },
    mounted() {
        axios.get('goodslist.json').then(res => {
            this.list = res.data.goodslist
            this.goodslist = this.list

        })


    },
    methods: {
        dadHandle(val) {
            this.goodslist = this.list.filter(v => v.cid == val)
        },

    },

}
</script>


<style>
.common-layout {
    background: url(../../assets/img/background2.png) no-repeat center;
    height: calc(100vh - 70px);
    /* 设置为视窗高度减去 70px */
    width: 100%;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 70px;
    overflow: hidden;
}

.el-header {
    --el-header-padding: 0 !important;
    height: 200px !important;

}

.demo-image .block:hover {
    transform: translateY(-10px);
    /* 悬停时稍微上移 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 添加阴影 */
}
</style>